<div class="styles-page">
    <div class="row">
        <div class="columns small-12">

            <h1>
                OpenFarm Style Guide
            </h1>
            <p>
                Hey there! Interested in contributing to OpenFarm's style? We've put together the following to help save you some time and get you up and styling fast. Ready? Let's go!
            </p>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="columns small-12">
            <h2>Staying Classy</h2>

            <p>
               The styles in this guide are available to all OpenFarm pages by default. Consider these styles and those provided by <a href="http://foundation.zurb.com/docs/">Foundation</a> before inventing something new so that we can keep a consistent look and feel across OpenFarm. If there is something new you'd like or something you think could be better please bring it up on Slack (<a href="mailto:rory@openfarm.cc?subject=Joining Slack!">email Rory</a> to get added!) or <a href="https://github.com/FarmBot/OpenFarm/issues">raise a GitHub issue</a>.
            </p>
            <p>
                As mentioned, these styles largely build off of Foundation; because of this a lot of the styles we use are not discussed here. <strong>If you're not familiar with Foundation, now is a great time to <a href="http://foundation.zurb.com/">familiarize yourself with it</a> before moving forward.</strong> If you've used <a href="http://getbootstrap.com/">Bootstrap</a> before, it is extremely similar, but does vary in syntax. If you want to do something really cool and don't see it in Foundation or here, please let us know so we can help :)
            </p>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="columns small-12">
            <h2>The CSS Itself</h2>

            <p>
                When contributing to OpenFarm's front-end it's a good idea to use existing views and and partials as a template (we do our best to lead by example, but we're not perfect… yet).
            </p>
            <hr>
            <h4>Where Should I Start?</h4>
            <p>
                Most stylesheets live in
            </p>
            <div class="code-block">
              OpenFarm/app/assets/stylesheets/styles
            </div>
            <p>
                (the overarching <kbd>application.css</kbd> and <kbd>main.css.scss</kbd> files livin <kbd>stylesheets/</kbd> but you should only have to mess with these <strong>when you add a new partial to main</strong>!
            </p>
            <hr>
            <h4>Partials and Scoping</h4>
            <p>
                All partials (for example <kbd>_crops.css.scss</kbd>, <kbd>_users.css.scss</kbd>) should contain one root selector that matches the partial name. For example <kbd>_crops.css.scss</kbd> should look something like this…
            </p>
            <div class="code-block">
                .crops {<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;.your-selectors-here {...}<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;.more-awesome-selectors {...}<br/>
                }<br/>
            </div>
            <p>
                …this prevents scoping issues where someone's class in another partial could override yours without you realizing it! Scope your selectors and don't forget to then wrap applicable views in a div with the matching selector class!</p>
            </p>
            <hr>
            <h4>Help! I Need a Global Selector!</h4>
            <p>
                If you think you need a global selector, take a moment, think hard, and consider going on a walk. Global selectors are rarely needed, but they are necessary sometimes! It's a good idea to bug the team when you need one, chances are it already exists in some form! Global selectors and variables go in <kbd>_presets.css.scss</kbd>.
            </p>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="small-12 columns">
            <h2>The Grid</h2>
            <p>
                Below is a row (styled so you can see it). They're used to create a max-width on a page. Every row must be filled with at least one column!
            </p>
            <div class="row display">
                <div class="small-12 columns">
                     This text is contained in one full-width (<kbd>small-12</kbd>) column, contained in a row. Inspect and explore!
                </div>
            </div>
            <br/>
            <p>
                Foundation's grid is composed of 12 columns. For tons of better examples, check out <a href="http://foundation.zurb.com/docs/components/grid.html">Foundation's examples</a>.
            </p>
            <div class="row display">
                <div class="columns large-1 small-1 display">1</div>
                <div class="columns large-1 small-1 display">2</div>
                <div class="columns large-1 small-1 display">3</div>
                <div class="columns large-1 small-1 display">4</div>
                <div class="columns large-1 small-1 display">5</div>
                <div class="columns large-1 small-1 display">6</div>
                <div class="columns large-1 small-1 display">7</div>
                <div class="columns large-1 small-1 display">8</div>
                <div class="columns large-1 small-1 display">9</div>
                <div class="columns large-1 small-1 display">10</div>
                <div class="columns large-1 small-1 display">11</div>
                <div class="columns large-1 small-1 display left">12</div>
                <p class="columns large-12 small-12">
                    Generally if you're viewing this on a small screen, the columns will wrap and stack on one another where a vertical layout typically makes more sense. (Note: we've disabled the wrapping on small screens in this example!)
                </p>
            </div>
        <div/>
    <div/>

    <div class="row display">
        <div class="columns large-3 small-6 display">
              This column has a <kbd>large-3</kbd> and <kbd>small-6</kbd> class, meaning when the page is small enough it will take up <strong>half the width</strong> of the row. Try resizing the page!
          </div>
          <div class="columns large-4 small-6 display">
              This column has a <kbd>large-4</kbd> and <kbd>small-6</kbd> class, meaning when the page is small enough it will take up <strong>half the width</strong> of the row. Try resizing the page!
          </div>
          <div class="columns large-5 small-12 display">
              This column has a <kbd>large-5</kbd> and <kbd>small-12</kbd> class, meaning when the page is small enough it will take up the <strong>full width</strong> of the row. Try resizing the page!
          </div>
          <p class="columns large-12">
              Keep in mind that people view websites on all sorts of screen sizes and resolutions. Make sure your columns don't get too small! That means avoid using columns classes smaller than <kbd>small-3</kbd>.
          </p>
        </div>
    </div>
    <div class="row">
        <div class="small-12 columns">
            <h4>Small, large, what?</h4>
            If you've reached this point and are confused it probably means you should go check out <a href="http://foundation.zurb.com/docs/components/grid.html">Foundation's docs</a>. Go ahead and check it out, we'll wait :)
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="columns small-12">
            <h2>Action Colors</h2>
            <p>
              These are based on the standard colors within Foundation.
            </p>
            <div class="row">
                <div class="columns large-3">
                    <div class="swatch">
                        <span class="swatch-preview" style="background-color: #c7a979;"></span>
                        <ul class="list-no-bullets swatch-details">
                            <li><strong>OpenFarm Primary</strong></li>
                            <li>$primary-color</li>
                            <li><kbd>primary</kbd></li>
                        </ul>
                    </div>
                </div>
                <div class="columns large-3">
                    <div class="swatch">
                        <span class="swatch-preview" style="background-color: #e7e7e7;"></span>
                        <ul class="list-no-bullets swatch-details">
                            <li><strong>OpenFarm Secondary</strong></li>
                            <li>$secondary-color</li>
                            <li><kbd>secondary</kbd></li>
                        </ul>
                    </div>
                </div>
                <div class="columns large-3">
                    <div class="swatch">
                        <span class="swatch-preview" style="background-color: #ff6666;"></span>
                        <ul class="list-no-bullets swatch-details">
                            <li><strong>OpenFarm Alert</strong></li>
                            <li>$alert-color</li>
                            <li><kbd>alert</kbd></li>
                        </ul>
                    </div>
                </div>
                <div class="columns large-3">
                    <div class="swatch">
                        <span class="swatch-preview" style="background-color: #74E29D;"></span>
                        <ul class="list-no-bullets swatch-details">
                            <li><strong>OpenFarm Success</strong></li>
                            <li>$success-color</li>
                            <li><kbd>success</kbd></li>
                        </ul>
                    </div>
                </div>
                <div class="columns large-3">
                    <div class="swatch">
                        <span class="swatch-preview" style="background-color: #f08a24;"></span>
                        <ul class="list-no-bullets swatch-details">
                            <li><strong>OpenFarm Warning</strong></li>
                            <li>$warning-color</li>
                            <li><kbd>warning</kbd></li>
                        </ul>
                    </div>
                </div>
                <div class="columns large-3 end">
                    <div class="swatch">
                        <span class="swatch-preview" style="background-color: #eecb91;"></span>
                        <ul class="list-no-bullets swatch-details">
                            <li><strong>OpenFarm Info</strong></li>
                            <li>$info-color</li>
                            <li><kbd>info</kbd></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row archived">
        <div class="columns small-12">
            <h2>Navigation Colors</h2>
            <p>Currently changing, please ignore for now.</p>
        </div>
        <div class="columns large-3">
            <div class="swatch">
                <span class="swatch-preview" style="background-color: #e69138;"></span>
                <ul class="list-no-bullets swatch-details">
                    <li><strong>OpenFarm Overview</strong></li>
                    <li>$of-orange</li>
                </ul>
            </div>
        </div>
        <div class="columns large-3">
            <div class="swatch">
                <span class="swatch-preview" style="background-color: #3c78d8;"></span>
                <ul class="list-no-bullets swatch-details">
                    <li><strong>OpenFarm Prerequisites</strong></li>
                    <li>$of-blue</li>
                </ul>
            </div>
        </div>
        <div class="columns large-3">
            <div class="swatch">
                <span class="swatch-preview" style="background-color: #674ea7;"></span>
                <ul class="list-no-bullets swatch-details">
                    <li><strong>OpenFarm Timeline</strong></li>
                    <li>$of-purple</li>
                </ul>
            </div>
        </div>
        <div class="columns large-3">
            <div class="swatch">
                <span class="swatch-preview" style="background-color: #6aa84f;"></span>
                <ul class="list-no-bullets swatch-details">
                    <li><strong>OpenFarm Instructions</strong></li>
                    <li>$of-green</li>
                </ul>
            </div>
        </div>
        <div class="columns large-3">
            <div class="swatch">
                <span class="swatch-preview" style="background-color: #cc0000;"></span>
                <ul class="list-no-bullets swatch-details">
                    <li><strong>OpenFarm Usage</strong></li>
                    <li>$of-red</li>
                </ul>
            </div>
        </div>
        <div class="columns large-3 end">
            <div class="swatch">
                <span class="swatch-preview" style="background-color: #f1c232;"></span>
                <ul class="list-no-bullets swatch-details">
                    <li><strong>OpenFarm Forum</strong></li>
                    <li>#f1c232</li>
                    <li>$of-yellow</li>
                </ul>
            </div>
        </div>
    </div>
    <hr/>

    <div class="row">
      <h2>Forms</h2>
      <p>
        Use <kbd>small</kbd> or <kbd>tiny</kbd> buttons. Links can also look like buttons. The following are defaults.
    </p>
    <input type="submit" class="button small"/>
    <input type="submit" class="button tiny" value="Tiny Submit Button"/>
    <a href="#" class="button small">Submit Link</a>
    <a href="#" class="button tiny">Tiny Submit Link</a>
    <p>
        Options: <kbd>alert</kbd>, <kbd>secondary</kbd>, <kbd>success</kbd>
    </p>
    <input type="submit" value="Alert" class="button small alert"/>
    <input type="submit" value="Secondary" class="button small secondary"/>
    <input type="submit" value="Success" class="button small success"/>
    </div>

    <hr/>

    <div class="row">
      <h2>Alerts</h2>
      <p>
        Don't use the foundation standard alert. Use <kbd>.alert-box</kbd> instead. Use  <kbd>.radius</kbd> to round them and limit their size with <kbd>.large-6</kbd>. Center them with <kbd>.centered</kbd>.
    </p>
    <div class="columns large-6 large-centered">
        <div data-alert="" class="alert-box success radius">
          This is a <kbd>success</kbd> alert.
          <a href="#" class="close">×</a>
      </div>
      <div data-alert="" class="alert-box alert radius">
          This is an <kbd>alert</kbd> alert.
          <a href="#" class="close">×</a>
      </div>
      <div data-alert="" class="alert-box warning radius">
          This is an <kbd>warning</kbd> alert.
          <a href="#" class="close">×</a>
      </div>
      <div data-alert="" class="alert-box info radius">
          This is an <kbd>info</kbd> alert.
          <a href="#" class="close">×</a>
      </div>
    </div>
    </div>

    <hr/>

    <div class="row">
      <h2>Icons</h2>

      <p>The icon set is still expanding, will probably use a font in the future.</p>

      <ul class="columns large-4 small-6">
        <li class="icon of-water"><kbd>.of-water</kbd></li>
        <li class="icon of-temperature"><kbd>.of-temperature</kbd></li>
        <li class="icon of-ph"><kbd>.of-ph</kbd></li>
        <li class="icon of-soil"><kbd>.of-soil</kbd></li>
        <li class="icon of-sun-shade"><kbd>.of-sun-shade</kbd></li>
        <li class="icon of-location"><kbd>.of-location</kbd></li>
        <li class="icon of-practices"><kbd>.of-practices</kbd></li>
        <li class="icon of-time-commitment"><kbd>.of-time-commitment</kbd></li>
        <li class="icon of-physical-ability"><kbd>.of-physical-ability</kbd></li>
        <li class="icon of-time-of-year"><kbd>.of-time-of-year</kbd></li>
    </ul>

    </div>

    <hr/>

    <div class="row">
      <h1>H1: The quick brown fox jumps over the lazy dog</h1>
      <h2>H2: The quick brown fox jumps over the lazy dog</h2>
      <h3>H3: The quick brown fox jumps over the lazy dog</h3>
      <h4>H4: The quick brown fox jumps over the lazy dog</h4>
      <h5>H5: The quick brown fox jumps over the lazy dog</h5>
      <h6>H6: The quick brown fox jumps over the lazy dog</h6>

      <p>P: The quick brown fox jumps over the lazy dog</p>

      <p>Link: The <a href="#">quick brown</a> fox.
      </p>
    </div>
</div>
<hr>
